<template>
	<view class="bg-white" style="height: 100vh;">
		<cu-custom :bgColor="NavBarColor" :isBack="true" backFlag="navigate">
			<block slot="backText">返回</block>
			<block slot="content">任务详情</block>
		</cu-custom>
		<view>
			<view class="bg-gray text-gray padding">
				基本信息
			</view>
			<view class="cu-list menu">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
					<view class="content">
						<text class="text-grey">任务名称</text>
					</view>
					<view class="action">
						<text class="text-grey">{{detailData.taskName}}</text>
					</view>
				</view>

				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
					<view class="content">
						<text class="text-grey">任务要求</text>
					</view>
					<view class="action">
						<text class="text-grey">{{detailData.taskRequire}}</text>
					</view>
				</view>

				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]">
					<view class="content">
						<text class="text-grey">信息类型</text>
					</view>
					<view class="action">
						<text class="text-grey">
							{{detailData.taskType === 1 ? '舆情类' : (detailData.taskType === 2 ? '引导类' : (detailData.taskType === 3 ? '群众工作类' : detailData.taskType))}}
						</text>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
					<view class="content">
						<text class="text-grey">截止时间</text>
					</view>
					<view class="action">
						<text class="text-grey">{{detailData.feedbackEndTime}}</text>
					</view>
				</view>

				<!-- <view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
					<view class="content">
						<text class="text-grey">附件</text>
					</view>
					<view class="action">
						<text class="text-grey">{{detailData.annex}}</text>
					</view>
				</view> -->


			</view>
			<view class="bg-gray text-gray padding">
				流程信息
			</view>

			<view v-if="detailData.taskDetailList &&(detailData.taskDetailList).length > 0 ">
				<view class="cu-list menu" v-for="(item,index) in (detailData.taskDetailList)" :key="index">
					<view class="cu-item animation-slide-bottom" :style="{animationDelay: animationDelay(index)}">
						<view class="animation-slide-bottom">
							<text class="text-grey">{{item.opinion ? item.opinion : '无标题'}}</text>
						</view>
						<view class="action">
							<text class="text-grey">{{item.operTime ? item.operTime : '--'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="cu-list menu">
				<view class="cu-item animation-slide-bottom" >
					无流程节点
				</view>
			</view>

			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue lg" @click="feedback">反馈</button>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				NavBarColor: this.NavBarColor,
				annotation: {
					id: "",
					titile: "",
					startTime: "",
					sender: "",
					msgContent: "",

				},
				goodNumber: null,
				flg: true,
				item: {},
				detailData: {},
				url: {
					toTransfer: '/task_new/taskEnterprise/enterpriseToTransfer',
					toSupervise: '/task_new/taskEnterprise/enterpriseToUrge',
				},
				form: {},
			}
		},
		// onLoad:function(){
		// 	console.log("this.$Route.query",this.$Route);
		// 	let query = this.$Route.query
		// 	if(query){
		// 		this.annotation = query;
		// 		}
		// },
		onLoad: function(option) {
			//    const annItem = JSON.parse(decodeURIComponent(option.item));
			// console.log("ann",annItem)
			// this.annotation = annItem 
			// this.readOk();
			//接收列表页的传参对象
			this.item = JSON.parse(decodeURIComponent(option.item));
			this.readOk()
		},
		created() {
			console.log("created")
			//this.readOk();
		},
		methods: {
			animationDelay(index) {  
			      // 计算动画延迟，从0.6秒开始，每次增加0.1秒  
			      let delay = 0.6 + index * 0.1;  
			      return delay + 's'; // 返回CSS兼容的字符串格式  
			    },
			feedback() {
				uni.navigateTo({
					url: '/pages/comManage/comManageFeedback?item=' + encodeURIComponent(JSON.stringify(this
						.detailData))
				});

				// let targetUrl = ''
				// //判断sourceName
				// if (this.detailData.sourceName === '转办岗') {
				// 	targetUrl = this.url.toTransfer
				// }
				// if (this.detailData.sourceName === '督办岗') {
				// 	targetUrl = this.url.toSupervise
				// }
				// console.log(targetUrl)
				// let form = {
				// 	annex: '附件1',
				// 	opinion: '意见2'
				// }
				// console.log('1111111111', this.detailData)

				// this.detailData.taskDetailList = []
				// this.detailData.taskDetailList.push(form)
				// //校验附件和意见是否填写
				// //调用反馈接口
				// this.$http.post(targetUrl, this.detailData).then(res => {
				// 	console.log('反馈接口返回值', res)
				// 	if (res.data.success) {
				// 		this.$tip.toast(res.data.message);
				// 	} else {
				// 		this.$tip.toast(res.data.message);
				// 	}
				// });
			},

			readOk() {
				console.log("readOk")
				// let param = {id:this.item.id}
				// debugger
				// // this.$http.put('/sys/sysAnnouncementSend/editByAnntIdAndUserId',param);
				// this.$http.get('/task_new/taskEnterprise/queryTaskDetailByMainId',param).then((res)=>{
				// 	console.log('queryById接口接收参数',res)
				// 	debugger
				// })
				let param = {
					id: this.item.id
				};

				// 将param对象转换为查询字符串格式  
				let queryString = Object.keys(param).map(key =>
					`${encodeURIComponent(key)}=${encodeURIComponent(param[key])}`).join('&');

				// 拼接到URL  
				let url = `/task_new/taskEnterprise/queryTaskDetailByMainId?${queryString}`;

				this.$http.get(url).then((res) => {
					console.log('queryById接口接收参数', res);
					this.detailData = res.data.result
					console.log('222',this.detailData.taskDetailList.length)
				});
			},
			formatDate(text, len) {
				if (!text || text.length == 0) {
					return ''
				}
				if (text.length < len) {
					return text;
				}
				return text.substr(0, len)
			},
			numberPlus() {
				if (this.flg) {
					this.goodNumber++
					this.flg = false
				} else {
					this.goodNumber--
					if (this.goodNumber == 0) {
						this.goodNumber = null
					}
					this.flg = true
				}
			}
		}
	}
</script>

<style>
	.flex-container {
		display: flex;
		align-items: center;
		/* 垂直居中 */
		justify-content: space-between;
		/* 水平居中 */
	}
</style>